﻿@page "/listbox/api"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the API functionalities of the ListBox component by using its properties from the property pane. Select any combination of properties from the property pane to achieve desired functionalities in ListBox component.</p>
</SampleDescription>
<ActionDescription>
   <p>In this demo, <code>ListBox</code> is rendered with grouping feature by setting the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.DropDowns.ListBoxFieldSettings~GroupBy.html'>GroupBy</a> property in <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html'>ListBoxFieldSettings</a> property. This sample has been showcased with following set of properties,</p>
    <ul><li>You can switch to <b>Single</b> or <b>Multiple</b> selection mode by selecting the mode from the selection mode dropdown list.</li>
        <li>You can switch to <b>None</b>, <b>Ascending</b>, or <b>Descending</b> sort orders by selecting the sort order from the sort order dropdown list.</li>
    </ul>
   <p>In this sample, grouping is enabled by default and vegetableData is grouped based on its category. The user can change the sort order and selection type using dropdownlist.</p>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div id="listbox-control1">
        @{
            if (orderValue == "Descending")
                sortValue = SortOrder.Descending;
            else if (orderValue == "Ascending")
                sortValue = SortOrder.Ascending;
            else
                sortValue = SortOrder.None;
        }
        <SfListBox DataSource="@vegetableData" TValue="string[]" TItem="Vegetables" SortOrder="@sortValue">
            <ListBoxFieldSettings Text="Vegetable" Value="Id" GroupBy="Category"></ListBoxFieldSettings>
            <ListBoxSelectionSettings Mode="@mode"></ListBoxSelectionSettings>
        </SfListBox>
    </div>
</div>
<div class="col-lg-4 property-section">
    <table id="property" title="Properties" style="width: 100%">
        <tbody>
            <tr>
                <td style="width: 50%;padding-top:10px">
                    <div>Sort order</div>
                </td>
                <td style="width: 50%;padding-top:10px">
                    <div style="max-width: 200px">
                        <SfDropDownList PopupHeight="200px" DataSource="@sortItems" @bind-Value="@orderValue" TValue="string" TItem="ValueDetails">
                            <DropDownListEvents TItem="ValueDetails" ValueChange="orderChange" TValue="string"></DropDownListEvents>
                            <DropDownListFieldSettings Text="Text"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;padding-top:10px">
                    <div>Selection Mode</div>
                </td>
                <td style="width: 50%;padding-top:10px">
                    <div style="max-width: 200px">
                        <SfDropDownList PopupHeight="200px" DataSource="@selectionType" @bind-Value="@selectionValue" TValue="string" TItem="ValueDetails">
                            <DropDownListEvents ValueChange="modeChange" TItem="ValueDetails" TValue="string"></DropDownListEvents>
                            <DropDownListFieldSettings Text="Text"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code{
    private SelectionMode mode = SelectionMode.Single;
    private string orderValue;
    private SortOrder sortValue;
    private string selectionValue;
    private void orderChange(ChangeEventArgs<string, ValueDetails> args)
    {
        orderValue = args.Value;
    }
    private void modeChange(ChangeEventArgs<string, ValueDetails> args)
    {
        if (args.Value.ToString() == "Single")
            mode = SelectionMode.Single;
        else
            mode = SelectionMode.Multiple;
    }
    protected override void OnInitialized()
    {
        orderValue = "None";
        selectionValue = "Single";
    }
    private List<ValueDetails> sortItems = new List<ValueDetails>
    {
        new ValueDetails{ Text = "None" },
        new ValueDetails{ Text = "Ascending" },
        new ValueDetails{ Text = "Descending" }

    };
    private List<ValueDetails> selectionType = new List<ValueDetails>
    {
        new ValueDetails { Text = "Single" },
        new ValueDetails { Text = "Multiple" }
    };
    private List<Vegetables> vegetableData = new List<Vegetables>
    {
        new Vegetables { Vegetable = "Cabbage", Category= "Leafy and Salad", Id= "item1" },
        new Vegetables { Vegetable = "Chickpea", Category= "Beans", Id= "item2" },
        new Vegetables { Vegetable = "Garlic", Category= "Bulb and Stem", Id= "item3"  },
        new Vegetables { Vegetable = "Green bean", Category= "Beans", Id= "item4" },
        new Vegetables { Vegetable = "Horse gram", Category= "Beans", Id= "item5"},
        new Vegetables { Vegetable = "Nopal", Category= "Bulb and Stem", Id= "item6" },
        new Vegetables { Vegetable = "Onion", Category= "Bulb and Stem", Id= "item7" },
        new Vegetables { Vegetable = "Pumpkins", Category= "Leafy and Salad", Id= "item8" },
        new Vegetables { Vegetable = "Spinach", Category= "Leafy and Salad", Id= "item9" },
        new Vegetables { Vegetable = "Wheat grass", Category= "Leafy and Salad", Id= "item10" },
        new Vegetables { Vegetable = "Yarrow", Category = "Leafy and Salad", Id = "item11" }
    };
    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string Id { get; set; }
    }
    public class ValueDetails
    {
        public string Text { get; set; }
    }
}

<style>
    #listbox-control {
        width: 350px;
        margin: auto;
        margin-bottom: 15px;
    }
    @@media screen and (max-width: 590px) {
        #listbox-control {
            width: 100%;
        }
    }
</style>
